<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>音乐部分</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/yinyue.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
	</head>
	
	<body>
		<svg style="display:none" xmlns="http://www.w3.org/2000/svg ">
		    <defs>
		        <symbol id="icon_praise" viewBox="0 0 32 32">
		            <title>赞</title>
		            <path d="M5.553 29.5c-1.408 0-2.553-1.143-2.553-2.547v-12.735c0-1.407 1.145-2.547 2.553-2.547h3.935c0.065-0.033 0.139-0.072 0.222-0.118 0.371-0.207 0.744-0.466 1.089-0.775 0.564-0.506 0.995-1.095 1.25-1.771 0.155-0.411 0.965-2.535 1.143-3.014 0.318-0.855 0.494-1.379 0.565-1.689 0.108-0.468 0.369-0.924 0.904-1.341 0.506-0.394 1.047-0.51 1.521-0.445 3.547 0.070 5.273 4.258 4.158 7.857l-0.331 1.333 5.252 0c2.405-0.063 4.186 2.039 3.637 5.169l-1.862 8.755c-0.211 1.867-2.221 3.869-4.379 3.869h-17.107zM10.5 13.351v14.149h12.142c1.093 0 2.3-1.209 2.38-2.088 0.004-0.041 0.010-0.081 0.018-0.121l1.887-8.803c0.325-1.841-0.479-2.784-1.626-2.754h-6.656c-0.67 0-1.162-0.624-1.001-1.269l0.677-2.695c0.795-2.51-0.354-5.259-2.318-5.259-0.052 0-0.104-0.004-0.177 0.014-0.137 0.106-0.164 0.153-0.174 0.194-0.099 0.426-0.296 1.007-0.648 1.947-0.184 0.49-1.005 2.628-1.159 3.033-0.383 1.008-1.014 1.863-1.816 2.577-0.47 0.418-0.971 0.763-1.472 1.041-0.019 0.011-0.038 0.021-0.057 0.031zM8.5 27.5v-14h-2.997c-0.277 0-0.503 0.233-0.503 0.519v12.962c0 0.284 0.227 0.519 0.503 0.519h2.997z"></path>
		        </symbol>
		        <symbol id="icon_like" viewBox="0 0 32 32">
		            <title>收藏</title>        
		            <path d="M16 28c0 0 2.11-1.591 2.259-1.704 2.168-1.707 3.155-2.51 4.483-3.692 2.147-1.911 3.825-3.7 4.974-5.417 0.822-1.229 1.357-2.402 1.565-3.528 0.941-5.091-1.221-8.588-5.151-9.44-2.959-0.641-6.218 0.432-8.131 2.659-1.975-2.525-5.247-3.477-8.295-2.5-3.688 1.182-5.83 4.758-5.040 9.323 0.245 1.418 1.093 2.956 2.449 4.636 1.061 1.314 2.415 2.69 4.029 4.142 1.441 1.296 2.502 2.165 4.774 3.968l2.085 1.554zM10.486 21.014c-1.541-1.384-2.825-2.687-3.811-3.906-1.164-1.44-1.863-2.706-2.040-3.729-0.624-3.599 0.95-6.222 3.685-7.098 2.629-0.842 5.444 0.239 6.747 2.866l0.66 1.331c0.123 0.248 0.327 0.246 0.452 0.003l0.678-1.323c1.177-2.295 4.186-3.559 6.84-2.985 2.842 0.615 4.363 3.073 3.61 7.141-0.154 0.83-0.581 1.766-1.265 2.788-1.038 1.55-2.611 3.224-4.642 5.030-1.289 1.145-2.254 1.929-4.377 3.599-0.119 0.090-0.852 0.651-1.024 0.769-0.025-0.020-0.783-0.597-0.931-0.68-2.173-1.723-3.202-2.567-4.582-3.806z"></path>
		        </symbol>
		        <symbol id="icon_liked" viewBox="0 0 32 32">
		            <title>已收藏</title>
		            <path d="M16 28c0 0 2.11-1.591 2.259-1.704 2.168-1.707 3.155-2.51 4.483-3.692 2.147-1.911 3.825-3.7 4.974-5.417 0.822-1.229 1.357-2.402 1.565-3.528 0.941-5.091-1.221-8.588-5.151-9.44-2.959-0.641-6.218 0.432-8.131 2.659-1.975-2.525-5.247-3.477-8.295-2.5-3.688 1.182-5.83 4.758-5.040 9.323 0.245 1.418 1.093 2.956 2.449 4.636 1.061 1.314 2.415 2.69 4.029 4.142 1.441 1.296 2.502 2.165 4.774 3.968l2.085 1.554z"></path>
		        </symbol>
		        <symbol id="icon_play_thin" viewBox="0 0 32 32">
		            <title>播放</title>
		            <path d="M16 29c7.177 0 13-5.818 13-13s-5.823-13-13-13c-7.177 0-13 5.818-13 13s5.823 13 13 13zM16 30c-7.732 0-14-6.268-14-14s6.268-14 14-14c7.732 0 14 6.268 14 14s-6.268 14-14 14zM12.5 20.186c0 0.189 0.054 0.374 0.155 0.534 0.295 0.467 0.913 0.606 1.379 0.311v0l6.627-4.186c0.126-0.079 0.232-0.186 0.311-0.311 0.295-0.467 0.155-1.085-0.311-1.379v0l-6.627-4.186c-0.16-0.101-0.345-0.155-0.534-0.155-0.552 0-1 0.448-1 1v8.371z"></path>
		        </symbol>
		        <symbol id="icon_pause_thin" viewBox="0 0 32 32">
		            <title>暂停</title>
		            <path d="M16 29c7.177 0 13-5.818 13-13s-5.823-13-13-13c-7.177 0-13 5.818-13 13s5.823 13 13 13zM16 30c-7.732 0-14-6.268-14-14s6.268-14 14-14c7.732 0 14 6.268 14 14s-6.268 14-14 14zM11 11.995v8.009c0 0.546 0.449 0.995 1.003 0.995h1.494c0.56 0 1.003-0.446 1.003-0.995v-8.009c0-0.546-0.449-0.995-1.003-0.995h-1.494c-0.56 0-1.003 0.446-1.003 0.995zM17.5 11.995v8.009c0 0.546 0.449 0.995 1.003 0.995h1.494c0.56 0 1.003-0.446 1.003-0.995v-8.009c0-0.546-0.449-0.995-1.003-0.995h-1.494c-0.56 0-1.003 0.446-1.003 0.995z"></path>
		        </symbol>
		        <symbol id="icon_download" viewBox="0 0 32 32">
		            <title>下载</title>
		            <path d="M15 18.978l-9.057-9.057-1.443 1.443 11.545 11.545 11.545-11.545-1.443-1.443-9.146 9.146v-15.567h-2v15.478zM26.5 24.5h2c0 2.241-1.726 4-3.893 4h-17.213c-2.165 0-3.893-1.761-3.893-4h2c0 1.14 0.886 2 1.893 2h17.213c1.010 0 1.893-0.858 1.893-2z"></path>
		        </symbol>                                                     
		    </defs>
		</svg>
		<div class="xiagu">
			<div class="shanglu">
				<div class="shanglubox">
					<div class="biaotou">
						<div class="biaotoubox">
							<span><img src="//y.gtimg.cn/mediastyle/mod/mobile/img/logo.svg?max_age=2592000"/></span>
							<span>
								<div>QQ音乐</div>
								<div>打开APP收藏、下载</div>
							</span>

							<a href="#">打开</a>
						</div>
					</div>
					<div class="zhuanji">
						<div class="zhuanjibox">
							<span><img src="img/zhoujielun.jpg"/></span>
							<span>
								<ul>
									<li>催泪大杀器！盘点演唱会经典万人大合唱</li>
									<li>
										<span><img src="https://thirdqq.qlogo.cn/g?b=sdk&k=0FNFoIZ4m3m4nFnxbUxY7w&s=100&t=549"/></span>
										<span>Harry</span>
									</li>
									<li>播放量：799.5万</li>
								</ul>
							</span>
						</div>
					</div>
					<div class="bofang">
						<div class="bofangbox">
							<a href="#">播放全部</a>
							<div class="bofangyinyue">
								<div class="yinyue">
									<svg>
										<use xlink:href="#icon_pause_thin" class="kaishi"></use>
										<use xlink:href="#icon_play_thin" class="zanting"></use>
									</svg>
									<div class="gequ">
										<h2>葫芦娃</h2>
										<div class="geci"></div>
									</div>
								</div>
								<svg class="xiazai">
									<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon_download"></use>
								</svg>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="zhonglu">
				<div class="zhonglubox">
					<div class="gedan">
						<span>歌单</span>
						<span>共66首</span>
					</div>
					<div class="shoucang"><span>收藏</span><i class="iconfont icon-shoucang"></i></div>
				</div>
			</div>
			<div class="xialu">
				<div class="xialubox">
					<ul>
						
					</ul>
				</div>
			</div>
			<div class="zuihou">
				<div class="zuihoubox">
					<div class="jiazai">
						<a href="#">点击加载更多</a>
					</div>
					<h2>歌单介绍</h2>
					<p>之前在微博看到一个视频关于周杰伦演唱会的视频，几万人一起合唱《七里香》。当时差点泪奔。一直想去小公举演唱会，无奈一直没买到票。</p>
					<p>最近有偶然发现一个贴，关于特别感人震撼的万人合唱音乐现场。实在没忍住，做了个歌单。</p>
					<p>里面包括Heal the world.——MJ 还有阿黛尔《Someone Like You》，《Don´t Look Back in Anger》 Oasis 2005 曼彻斯特演唱会。</p>
					<div class="qqyinyue">
						<div class="tupian"><img src="//y.gtimg.cn/mediastyle/mod/mobile/img/logo.svg?max_age=2592000" /></div>
						<div>QQ音乐</div>
					</div>
				</div>
			</div>
		</div>
		<audio data-web-player="1" style="height:0;width:0;display:none" loop="" src="http://dl.stream.qqmusic.qq.com/C400004VT0bS0b3Cmu.m4a?vkey=220DC73448175C7127548F4615770832B19227991D40FCAB6CF930FF0E746087D558CF4B4F88D93D590B023AA557EDC7D1D21AD99B2485B3&guid=1810523846&uin=0&fromtag=66"></audio>
		<script type="text/javascript">
			function yinyuebofang(){
				var zanting = document.querySelector(".zanting");
				var bofang = document.querySelector(".kaishi");
				var audio = document.querySelector("audio");
				console.log(audio)
				zanting.addEventListener("click",function(){
					audio.play();
				});
				bofang.addEventListener("click",function(){
					audio.pause();
				})
			}
			yinyuebofang()
			function shoucang() {
				var shoucang = document.querySelector(".shoucang");
				var quxiao = true;
				shoucang.addEventListener("click", function() {
					if(quxiao) {
						shoucang.style.color = "#31c27c";
						quxiao = false;
					} else {
						shoucang.style.color = "";
						quxiao = true;
					}
				})
			}
			shoucang()
			function bofang(){
				var zanting = document.querySelector(".zanting");
				var bofang = document.querySelector(".kaishi");
				zanting.addEventListener("click",function(){
					bofang.style.display="block";
					zanting.style.display="none";
				})
				bofang.addEventListener("click",function(){
					zanting.style.display="block";
					bofang.style.display="none";
				}) 
			}
			bofang()
			function bofangyinyue(){
				var zhanxian = document.querySelector(".bofangbox a");
				var xiaoshi = document.querySelector(".bofangyinyue");
				var bofangbox = document.querySelector(".bofangbox");
				zhanxian.addEventListener("click",function(){
					xiaoshi.style.display="block";
					zhanxian.style.display="none";
				});
			}
			bofangyinyue()
			var domain = " https://www.easy-mock.com/mock/5aaa3dc2a0732407530b8b37/example"
			
			
			var audio=document.querySelector("audio");
			var lryic = "[ti&#58;葫芦娃]&#10;[ar&#58;少儿歌曲]&#10;[al&#58;童年的歌谣&#32;&#32;CD2]&#10;[by&#58;]&#10;[offset&#58;0]&#10;[00&#58;00&#46;10]葫芦娃&#32;&#40;《葫芦兄弟》动画主题曲&#41;&#32;&#45;&#32;儿歌&#10;[00&#58;00&#46;20]词：吴应炬&#10;[00&#58;00&#46;30]曲：吴应炬&#10;[00&#58;00&#46;40]&#10;[00&#58;14&#46;74]葫芦娃&#10;[00&#58;15&#46;49]葫芦娃&#10;[00&#58;17&#46;42]一根藤上七朵花&#10;[00&#58;20&#46;92]风吹雨打&#10;[00&#58;22&#46;42]都不怕&#10;[00&#58;23&#46;42]&#10;[00&#58;24&#46;23]啦啦啦啦&#10;[00&#58;26&#46;04]&#10;[00&#58;27&#46;91]叮当当咚咚当当&#10;[00&#58;29&#46;79]&#10;[00&#58;30&#46;35]葫芦娃&#10;[00&#58;31&#46;28]叮当当咚咚当当&#10;[00&#58;33&#46;34]本领大&#10;[00&#58;34&#46;77]啦啦啦啦&#10;[00&#58;36&#46;27]&#10;[00&#58;37&#46;83]葫芦娃&#10;[00&#58;39&#46;33]葫芦娃&#10;[00&#58;40&#46;33]&#10;[00&#58;41&#46;08]本领大&#10;[00&#58;43&#46;20]&#10;[00&#58;58&#46;81]葫芦娃&#10;[00&#58;59&#46;68]葫芦娃&#10;[01&#58;01&#46;37]一根藤上七朵花&#10;[01&#58;04&#46;68]风吹雨打&#10;[01&#58;06&#46;30]都不怕&#10;[01&#58;07&#46;87]啦啦啦啦&#10;[01&#58;09&#46;55]&#10;[01&#58;11&#46;54]叮当当咚咚当当&#10;[01&#58;13&#46;30]葫芦娃&#10;[01&#58;14&#46;85]叮当当咚咚当当&#10;[01&#58;16&#46;53]本领大&#10;[01&#58;17&#46;47]啦啦啦啦&#10;[01&#58;19&#46;41]&#10;[01&#58;21&#46;34]葫芦娃&#10;[01&#58;22&#46;47]&#10;[01&#58;23&#46;15]葫芦娃&#10;[01&#58;24&#46;15]&#10;[01&#58;24&#46;83]本领大";
			var lryic=lryic.replace(/&#(\d+);/g,function(a,b){
				return String.fromCharCode(b);
			})
			lryic=lryic.replace(/\n/g,"=.=");//换行
			lryic=lryic.split("=.=");
			var lryicArr=[]
			lryic.forEach(function(el,index){
				var obj={}
				//播放对应时间
				obj.time=el.match(/\[(\s)|(\S)*\]/g)[0];
				obj.lryic=el.replace(/\[(\s)|(\S)*\]/g,"");
				lryicArr.push(obj)
			})
			lryicArr=lryicArr.filter(function(el){
				return el.lryic!=""&&!/a-z/i.test(el.time);
			})
			console.log(lryicArr)
			//输出到页面
			var box=document.querySelector(".geci")
			var tmp="";
			lryicArr.forEach(function(el,index){
				tmp+=`<li>${el.lryic}</li>`
			})
			console.log(tmp)
			var cdf=document.createDocumentFragment();
			var search_ul=document.createElement("ul");
			search_ul.innerHTML=tmp;
			cdf.appendChild(search_ul);
			box.appendChild(cdf)
			//播放时间动态监听
			var time="";
			audio.addEventListener("timeupdate",function(e){
				time=Math.floor(e.target.currentTime);
				var m=Math.floor(time/60%60);
				var s=time%60;
				if(m<10){
					m="0"+m;
				}
				if(s<10){
					s="0"+s;
				}
				time=m+":"+s;//组装当前时间
				tt()
			})
			console.log(time)
			var test=[];//这里装的是切割后的时间
			lryicArr.forEach(function(el,index){
				test.push(el.time.slice(1,6));//切割歌词时间
			})
//			console.log(lryicArr)
//			console.log(test)
			var geci_li=document.querySelectorAll("ul li")//获取页面所有歌词li
			console.log(geci_li)
			var change_value=geci_li[0].offsetHeight;
			var step=0;
			function tt(){
				console.log(time)
				test.forEach(function(el,index){
					if(el==time){
						step=index*20;
						var y_zhi="translateY"+"(-"+step+"px)";
						search_ul.style.transform=y_zhi;
						console.log(y_zhi);
					}
				})
			}
			function aj(method,url,data_id){
				var xhr = new XMLHttpRequest();
				xhr.open(method,url);
				xhr.send(data_id)
				xhr.addEventListener("readystatechange",function(){
					if(xhr.status==200&&xhr.readyState==4){
//						return xhr.response;
//						异步操作在回调函数的作用域内处理数据
//						console.log(xhr.response)
						gequ(xhr.response);
					}
				})
			}
			aj("GET",domain+"/gequ");
			function gequ(res){
				var res = JSON.parse(res);
				var userInfo = res.data_id.data.tracks;
//				console.log(userInfo);
				var template="";
				userInfo.forEach(function(el){
					template+=`<li>
						<div>${el.title}</div>
						<div><span>${mingzi(el.singer)}</span><span>${el.album.title}</span></div>
					</li>`
				})
				function mingzi(list){
					var template="";
					list.forEach(function(ele,index){
//						console.log(ele)
						template+=`${ele.name}`
						
					});
					return template;
				}
//				文档碎片
				var cdf = document.createDocumentFragment();
//				如何创建容器
				var baba = document.createElement("li");
//				baba.classList.add("dier");
				baba.innerHTML+=template;
				cdf.appendChild(baba);
//				将baba添加到页面上
				document.querySelector(".xialubox ul").appendChild(cdf);
			}
		</script>
	</body>

</html>